<template>
    <div>
        <span>我是子组件</span>
        <div>
            我叫{{ msg }},外号{{name}},在{{school}}读书
        </div>
        <div class="btn-grouds">   
            <el-button class="btn1" @click="changInfo">点击更改 子组件内容</el-button>
            <el-button  @click="parent"> 点击 触发父组件事件</el-button>
        </div>
        <!-- <slot name="first"/> -->
        <span> 姓：</span>
        <el-input v-model="xing"  />
        <br>
        <span> 名：</span>
        <el-input v-model="ming"  class="input2"/>
        <div>全名：{{nameContent}}</div>
        <div>深层对象的值：{{obj1.j1.name}}</div>
        <!-- 计算属性算出来的 -->
        <el-input v-model="nameContent"  class="input2"/>
        <!-- 监听 -->
        <div>
            数字状态：{{state}}
        </div>
        <el-button @click="state++"> 点击改变数字状态 </el-button>
        <div>
            文字状态：{{state1}}
        </div>
        <el-button @click="state1+='~'"> 点击改变文字状态 </el-button>
        <div v-if="isShowPoint">
            X坐标：{{pointX}}，Y坐标：{{pointY}}
        </div>
        <el-button  @click.stop="isShowPoint = !isShowPoint">隐藏坐标</el-button>
    </div>
</template>

<script>
import usePoint from '../hooks/usePoint'
import { computed, reactive, toRefs, watch,ref, watchEffect, watchSyncEffect, onMounted } from 'vue'

export default {
    name:'children1',
    props:{
        msg:{
            type:[String,Number],
            default:''
        },
        name:{
            type:String,
            default:''
        },
        school:{
            type:String,
            default:''
        }
    },
    setup(props,{emit,slots,attrs}){
        
        let  state = ref(0)
        let  state1 = ref("xxx")
        let  data = reactive({
            xing:'李',
            ming:'进',
            isShowPoint:true,
            obj1:{
                j1:{
                    name:'213'
                }
            }
        })
        let point  = usePoint()
        onMounted(()=>{
            console.log('我是父组件')
        })
        // 监听单个ref
        // watch(state,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
        // 监听多个ref
          watch([state,state1],([stateNewVal,state1NewVal],[stateOldVal,state1OldVal])=>{
            console.log([stateNewVal,state1NewVal],[stateOldVal,state1OldVal])
        })

        //监听reactive的值 deep是默认开启的  监听的那个值要用 箭头函数 不能直接监听 会监听不到
        // 监听多个就用[]
        // watch(()=>data.xing,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal)
        // })
         //监听reactive对象 直接监听就行不用写函数return 有个问题 拿不到oldVal
        //  watch(data,(newVal,oldVal)=>{
        //     console.log(newVal,oldVal,'111')
        // })
        // watchEffect  用到哪个属性就监听哪个 直接监听reactive对象不生效 
         watchEffect(()=>{
            let x1 = state.value
            let x2 = data.xing

            // 下面写逻辑 
            console.log(x1,x2,'wqewwqeqweqwewe')
         })
         watchSyncEffect
        //  计算简写形式  只是只读  不能修改 
        data.nameContent =  computed(()=> data.xing + data.ming)
        // 计算属性完整写法 能读能写
        // data.nameContent =  computed({
        //     get(){
        //         return data.xing + data.ming
        //     },
        //     set(value){
        //         const newValue = value.split('')
        //         data.xing =  newValue[0]
        //         data.ming =  newValue[2]
        //         console.log(newValue)
        //     }
        // })
        let changInfo = ()=>{
            console.log(props,slots)
            console.log(emit,attrs)
        }
        let parent =()=>{
            emit('hello',123)
        }
        return {
            changInfo,
            parent,
            state,
            state1,
            ...toRefs(data),
            ...toRefs(point)
        }
    }
}
</script>
<style lang="scss" scoped> 
    .btn-grouds{
        margin-bottom: 30px;
        .btn1{
            margin-right: 5px;
        }
    }
    .el-input{
        width: 200px;
    }
    .input2{
        margin-top: 10px;
    }
</style>